<template>
	<tm-app color="#EFEFEF">
		<navbar-module title="所有工单"></navbar-module>
		<tabs-module :list="tabsTit" @tabschange="tabschange" defaultName="L1"></tabs-module>

		<tm-cell  :title="statusWord+'的工单'" :titleFontSize='30' :margin="[32,20,32,0]" :round="5" :padding="[30,24]" @click="test">
			<template v-slot:right>
				<tm-icon v-if="!showdateq" name="tmicon-angle-right"></tm-icon>
				<tm-icon v-else name='tmicon-angle-down'></tm-icon>
			</template>
		</tm-cell>


		<view v-if="itemData.length>0" class="firstDom">
		<!-- 入栏工单  `/pages/inclub/details/details?data=${encodeURIComponent(JSON.stringify(item))}` -->
		    <view v-if="params.kind === 'L1'" class="listDom">
				<tm-scrolly :refresher="false" v-model:bottom-value="bottomFresh" @bottom="refreshBottom" _style="height:100%">
					<was-work-list-item :data="{}" :url="``" v-for="item in itemData" :key="item.code" :code="item.pig.pigLevel?.kind?.label" :label="item.status?.label" :tag-color="tabColor[item.status.value]" icon="tmicon-right-arrow-rect" titleColor="red">
						<tm-text :label="`猪仔名称：${item.pig?.name}`" class="text" :fontSize="32"/>
						<tm-text v-if="item.status.value!=='ALLOCATED'" :label="`负责人: ${item.staff?.name}`" class="text" :fontSize="32"/>
						<tm-text v-if="item.status.value==='COMPLETED'" :label="`所属猪圈：${item.content?.pigsty?.name}`" class="text" :fontSize="32"/>
						<!-- <tm-text :label="`喂养方式：${item.pig.pigLevel?.kind.label}`" class="text"/> -->
						<tm-text :label="`猪仔品种：${item.pig?.pigLevel?.breed?.name}`" class="text" :fontSize="32"/>
						<tm-text v-if="item.status.value!=='COMPLETED'" :label="`创建时间：${item.createTime}`" class="text text-border" color="#999" :font-size="28"/>
						<tm-text v-else :label="`完成时间：${item.completeTime}`" class="text text-border" color="#999" :font-size="28"/>
					</was-work-list-item>
				</tm-scrolly>
		    </view>

		    <!-- 喂食工单   /pages/feed/details/details?data=${encodeURIComponent(JSON.stringify(item))}  -->
		    <view v-else-if="params.kind === 'L3'" class="listDom">
				<tm-scrolly :refresher="false" v-model:bottom-value="bottomFresh" @bottom="refreshBottom" _style="height:100%">
					<was-work-list-item :data="{}" :url="``" v-for="item in itemData" :key="item.code" :code="item.content.combo.name" :label="item.status.label" :tag-color="tabColor[item.status.value]" icon="tmicon-ios-leaf" titleColor="red">
						<tm-text :label="`猪仔名称：${item.pig?.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`负责人: ${item.staff?.name}`" class="text" :fontSize="32"/>
						<!-- <tm-text :label="`主食：${item.content.combo.name}`" class="text" :fontSize="32"/> -->
						<tm-text v-if="item.tuck" class="text" :fontSize="32">
							<template>零食：{{item.tuck}}</template>
						</tm-text>
						<tm-text :label="`所属猪圈：${item.pig?.pigsty?.name}`" class="text" :fontSize="32"/>
						<tm-text v-if="item.status.value!=='COMPLETED'" :label="`创建时间：${item.createTime}`" class="text text-border" color="#999" :font-size="28"/>
						<tm-text v-else :label="`完成时间：${item.completeTime}`" class="text text-border" color="#999" :font-size="28"/>
					</was-work-list-item>
				</tm-scrolly>
		    </view>

		    <!-- 治疗工单  /pages/treatment/details/details -->
		    <view v-if="params.kind === 'L4'" class="listDom">
				<tm-scrolly :refresher="false" v-model:bottom-value="bottomFresh" @bottom="refreshBottom" _style="height:100%">
					<was-work-list-item :data="{}" url="" v-for="item in itemData" :key="item.code" :code="item.content" titleColor="red" icon="tmicon-new-releases">
						<tm-text :label="`猪仔名称：${item.pig?.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`所属猪圈：${item.pig?.pigsty?.name}`" class="text" :fontSize="32"/>
						<!-- <tm-text :label="`治疗类型：${item.content}`" class="text"/> -->
						<tm-text :label="`治疗人员：${item.staff?.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`治疗时间：${item.completeTime} `" class="text text-border" color="#999" :font-size="28"/>
				    </was-work-list-item>
				</tm-scrolly>
		    </view>


			<!-- 服务工单  /pages/service/details/details?data=${encodeURIComponent(JSON.stringify(item))} -->
			<view v-else-if="params.kind === 'L5'" class="listDom">
				<tm-scrolly :refresher="false" v-model:bottom-value="bottomFresh" @bottom='refreshBottom' _style="height:100%">
					<was-work-list-item :data="{}" :url="``" v-for="item in itemData" :key="item.code" :code="item.content.combo.name" :label="item.status.label" :tag-color="tabColor[item.status.value]" icon="tmicon-clock-fill" titleColor="red">
					    <tm-text :label="`猪仔名称：${item.pig?.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`负责人: ${item.staff?.name}`" class="text" :fontSize="32"/>
					    <!-- <tm-text :label="`服务项目：${item.content.combo.name}`" class="text"/> -->
					    <tm-text :label="`所在猪圈：${item.pig?.pigsty?.name}`" class="text" :fontSize="32"/>
					   <tm-text v-if="item.status.value!=='COMPLETED'" :label="`创建时间：${item.createTime}`" class="text text-border" color="#999" :font-size="28"/>
					   <tm-text v-else :label="`完成时间：${item.completeTime}`" class="text text-border" color="#999" :font-size="28"/>
					</was-work-list-item>
				</tm-scrolly>
			</view>
		</view>
		<view v-else>
			<no-data :flag="loadFlag"/>
		</view>

		<tm-picker v-model:show="showdateq" @confirm="pickerClick" @close="showdateq = false" :columns="statusdate" v-model="pickValue" v-model:model-str="statusWord" color="#23C343"/>
	</tm-app>
</template>

<script setup lang='ts'>
	import { onShow } from "@dcloudio/uni-app";
	import { ref,reactive } from 'vue'
	import {getListOrder} from '../../index/resource/http'

	const params = reactive({kind:'L1',status:'PROGRESS',pageNo:1,pageSize:10})
	const pickValue = ref(['PROGRESS'])
	const statusWord = ref('进行中')
	const itemData = ref([])
	const loadFlag = ref(false)

	const tabColor = {'PROGRESS':'#3bb1fd','ALLOCATED':'#f9ae70','COMPLETED':'#23C343'}

	const showdateq = ref(false)
	let statusdate = [{text:'进行中',id:'PROGRESS'},{text:'未分配',id:'ALLOCATED'},{text:'已完成',id:'COMPLETED'}]


	onShow(()=>{
		getData()
	})
	
	const bottomFresh = ref(false)
	const bottomFlag = ref(true)

	const tabsTit = ref([
		{ key: 'L1', title: '入栏工单', },
		// { key: 'L2', title: '出栏工单', icon: 'tmicon-ios-rocket' },
		{ key: 'L3', title: '喂食工单',  },
		{ key: 'L4', title: '治疗工单',  },
		{ key: 'L5', title: '服务工单',},
	])

	const getData = async () => {
		itemData.value = []
		params.pageNo = 1
        const res = await getListOrder(params)
		if(res.code == 0){
			itemData.value = res.data.records
			bottomFlag.value = res.data.hasNext
		}
		
		loadFlag.value = true
	}

	const tabschange = (key) => {		
	    params.kind = key
		loadFlag.value = false
		
		if(key==='L1'){
			statusdate = [{text:'进行中',id:'PROGRESS'},{text:'未分配',id:'ALLOCATED'},{text:'已完成',id:'COMPLETED'}]
		}else if(key==='L4'){
			statusdate = [{text:'已完成',id:'COMPLETED'}]
			params.status = 'COMPLETED'
			statusWord.value = '已完成'
		}else{
			statusdate = [{text:'进行中',id:'PROGRESS'},{text:'已完成',id:'COMPLETED'}]
		}
		
		getData()
	}

	const test = ()=>{
		showdateq.value = true
	}

	const pickerClick = (val) => {
		params.status = statusdate[val]?.id
		getData()
		
		loadFlag.value = false
	}
	
	const refreshBottom = async ()=>{
		if(bottomFlag.value){
			bottomFresh.value = true
			params.pageNo++
			const {data} = await getListOrder(params)
			itemData.value.push(...data.records)
			
			bottomFresh.value = false
			bottomFlag.value = data.hasNext
		}
		
	}


</script>

<style scoped lang="less">

</style>
